<template>
<div @click="toMall">
  <el-container >
    <el-header>
      <div class="top">
        <el-image src="./static/img/title.png" fit="contain" style="width: 300px;align-self: flex-start"></el-image>
        <el-menu @select="handleSelect" default-active="1" style="width: 700px" mode="horizontal" active-text-color="#ff9900">
          <el-menu-item index="1" route="/">首页</el-menu-item>
          <el-menu-item index="2">我的工作台</el-menu-item>
          <el-menu-item index="3">关于我们</el-menu-item>
        </el-menu>
        <el-link style="color: chocolate" href="http://localhost:8080/#/login" v-if="!user">亲，请登录</el-link>
        <span v-if="user">欢迎您</span>
      </div>
    </el-header>
    <el-main>
      <div  class="research">
        <el-input prefix-icon="el-icon-search" placeholder="请输入搜索内容"></el-input>
        <el-button style="background-color: chocolate;color: white">搜索</el-button>
      </div>
      <div class="mainHead">
        <div class="classify">
          <el-menu background-color="#ff9900" text-color="#ffffff" active-text-color="#ff6600">
            <el-menu-item>精品服饰</el-menu-item>
            <el-menu-item>文娱教育</el-menu-item>
            <el-menu-item>家用电器</el-menu-item>
            <el-menu-item>食品酒类</el-menu-item>
            <el-menu-item>家居清护</el-menu-item>
          </el-menu>
        </div>
        <div class="image">
          <el-carousel type="card">
            <el-carousel-item v-for="item in imgList">
              <img class="headImg" alt="轮播图" :src="item" fit="fill">
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </el-main>
      <div class="region">
        <h1>大牌直供，借卖无忧</h1>
        <ul>
          <!-- v-for key值 -->
          <li class="goods" v-for="item in goodsList1" :key="item.id">
              <!-- 图片 -->
              <div class="goodsPhoto">
                <img :src="item.url">
              </div>
              <div>{{item.title}}</div>
          </li>
        </ul>
      </div>
      <div class="region">
        <h1>众多商品，供君挑选</h1>
        <ul>
          <!-- v-for key值 -->
          <li class="goods" v-for="item in goodsList1" :key="item.id">
            <!-- 图片 -->
            <div class="goodsPhoto">
              <img :src="item.url" width="160">
            </div>
            <div @click="toMall">{{item.title}}</div>
          </li>
        </ul>
      </div>

  </el-container>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible">
    <div>跨境电商小组</div>
    <div>组长：卢京欣 </div>
    <div>组员：贾雯琪，邱雪</div>
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "index",
  mounted () {
    this.user = JSON.parse(window.sessionStorage.getItem("user"));
    this.getRequest("../../static/index/goodsList.json").then(res=>
    {
      for(let i=0,length=res.length;i<length;i++)
      {
        this.goodsList1.push(res[i]);
      }
      console.log(this.goodsList1);
    })
  },
  data(){
    return{
      user:'',
      imgList:[
        require('../../static/img/index/1.png'),
        require('../../static/img/index/2.jpg'),
        require('../../static/img/index/2.png')
      ],
      dialogVisible:false,
      goodsList1:[],
      goodsList2:[],
    }
  },
  methods:{
    handleSelect(index)
    {
      if(index==='1')
      {
        this.$router.push("/")
      }else if(index==='2')
      {
        if(this.user)
        {
          let identity = this.user.identity;
          if(identity==='1')
          {
            this.$router.push("/admin");
          }
          else if(identity==='2')
          {
            this.$router.push("/home");
          }else
          {
            this.$router.push("/cvo");
          }
        }else
        {
          this.$router.push("/login")
        }

      }else
      {
        this.dialogVisible = true;
      }
    },
    toMall(){
      if(this.user)
      {
        //借卖方和买家可以选购商品
        if(this.user.identity=='2'||this.user.identity=='3')
        {
          this.$router.replace("/mall")
        }
        //管理员和供货商前往工作台
        else
        {
          if(this.user.identity=='0')
          {
            this.$router.replace("/admin")
          }else
          {
            this.$router.replace("/home")
          }
        }
      }
      else
      {
        this.$router.push("/login");
      }
    }
  }
}
</script>

<style scoped>
.top{
  padding: 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mainHead{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.image{
  width: 800px;
}
.headImg{
  width:100%;
  height: inherit;
}
.research
{
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.region{
  margin: 0 auto;
  width: 1400px;
  height: 600px;
  text-align: center;
  color: chocolate;
}
.goods{
  display: block;
  float: left;
  width: 200px;
  height: 250px;
  background-color: #FFFFFF;
  margin: 15px 0 0 30px;
  margin-top: 20px;
}
.goodsPhoto{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  text-align: center;
  margin: 10px 0;
}
img {
  width: 200px;
  height: 200px;
}
</style>
